<template>
    <div class="dashboard-page">
        <div class="header">
            <h1>商家数据统计</h1>
        </div>

        <div v-if="loading" class="loading-state">正在加载数据...</div>
        <div v-if="error" class="error-state">{{ error }}</div>

        <div v-if="stats" class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon icon-stores">
                    <svg viewBox="0 0 24 24"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>商店总数</h3>
                    <p>{{ stats.shopNumber }}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-orders">
                    <svg viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6-2h4v2h-4V4zM4 19V8h16v11H4z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>订单总数</h3>
                    <p>{{ stats.orderCount }}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-sales">
                    <svg viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>销售额</h3>
                    <p>¥{{ formatNumber(stats.shopturnover) }}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-favorites">
                    <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>总收藏量</h3>
                    <p>{{ stats.favoriteCount }}</p>
                </div>
            </div>
        </div>

        <div class="chart-container">
            <h2>商家数据概览</h2>
            <v-chart class="chart" :option="chartOption" autoresize />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { api } from '@/network/api';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

// 数据定义
const stats = ref<any>(null);
const loading = ref(true);
const error = ref<string | null>(null);

// 数字格式化函数
const formatNumber = (value: number) => {
    return value.toLocaleString('zh-CN');
};

// 主图表配置
const chartOption = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['商店', '订单', '销售额(千元)', '收藏'],
        axisTick: {
            alignWithLabel: true
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '数量',
            data: [], // 初始为空，将由API数据填充
            type: 'bar',
            barWidth: '60%',
            label: {
                show: true,
                position: 'top',
                formatter: '{c}'
            }
        }
    ]
});

// 获取商家仪表盘数据
const fetchShopkeeperStats = async () => {
    try {
        loading.value = true;
        console.log('开始获取商家统计数据...');
        
        // 调用商家仪表盘数据接口
        const response = await api.getShopkeeperStats();
        console.log('商家统计数据响应:', response);
        
        // 处理嵌套的数据结构
        if (response && response.data && response.data.data) {
            // 获取嵌套的data对象
            const shopkeeperData = response.data.data;
            console.log('商家统计嵌套数据:', shopkeeperData);
            
            // 设置统计数据
            stats.value = shopkeeperData;
            console.log('设置商家统计数据:', stats.value);
            
            // 为主图表设置数据
            const colors = ['#e67e22', '#9b59b6', '#3498db', '#e74c3c'];
            const chartData = [
                {
                    value: shopkeeperData.shopNumber || 0,
                    itemStyle: { color: colors[0] }
                },
                {
                    value: shopkeeperData.orderCount || 0,
                    itemStyle: { color: colors[1] }
                },
                {
                    value: ((shopkeeperData.shopturnover || 0) / 1000).toFixed(2),
                    itemStyle: { color: colors[2] }
                },
                {
                    value: shopkeeperData.favoriteCount || 0,
                    itemStyle: { color: colors[3] }
                }
            ];
            chartOption.value.series[0].data = chartData as any;
            
            error.value = null;
        } else {
            console.error('响应中没有找到有效数据');
            throw new Error('无效的响应数据');
        }
    } catch (err) {
        console.error("获取商家仪表盘数据失败:", err);
        error.value = '数据加载失败，使用模拟数据展示';
        
        // 设置模拟数据以便于演示
        stats.value = {
            shopNumber: 2,
            shopturnover: 9983.0,
            orderCount: 18,
            favoriteCount: 0
        };
        
        // 为主图表设置模拟数据
        const colors = ['#e67e22', '#9b59b6', '#3498db', '#e74c3c'];
        const chartData = [
            {
                value: 2,
                itemStyle: { color: colors[0] }
            },
            {
                value: 18,
                itemStyle: { color: colors[1] }
            },
            {
                value: (9983 / 1000).toFixed(2),
                itemStyle: { color: colors[2] }
            },
            {
                value: 0,
                itemStyle: { color: colors[3] }
            }
        ];
        chartOption.value.series[0].data = chartData as any;
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    fetchShopkeeperStats();
});
</script>

<style scoped>
.dashboard-page {
    padding: 30px;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.header h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}
.stat-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 25px;
    display: flex;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
}
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}
.stat-icon svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}
.stat-info h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #666;
    font-weight: 500;
}
.stat-info p {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}
.icon-stores { background-color: #e67e22; }
.icon-orders { background-color: #9b59b6; }
.icon-sales { background-color: #3498db; }
.icon-favorites { background-color: #e74c3c; }

.chart-container {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}
.chart-container h2 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}
.chart {
    height: 350px;
}
.loading-state, .error-state {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    color: #666;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}
</style> 